<template>
  <div class="wrapper">
    <div class="sub_title lr_nav_bot_bd">
      <div style="height: var(--lr_status_height);"></div>
      <div class="tit_txt">
        <div class="ic icl">
          <i style="font-size: 21rem; font-weight: 400;margin-left: 3vw;" class="iconfont lricon-daorudaochu"></i>
        </div>
        <div @click="r">(六壬起个课APP-我的)</div>
        <div @click.stop="goRiLi" class="ic icr"><i style="font-size: 21rem;margin-right: 3vw;"
            class="iconfont lricon-yunduanshuaxin"></i></div>
      </div>
    </div>
    <div class="wrapper_top">
      <div class="total">
        <div class="left_box">
          <div class="left">总共<span style="color: red;">{{ qikeCord.length }}</span>条起课记录</div>
          <div :class="{ slcGljl: isGljl }"
            @click="() => { if (isGljl == false) { isGljl = true; btnMgTxt = '退出管理' } else { isGljl = false; btnMgTxt = '管理记录' } }"
            class="gljl">
            {{ btnMgTxt }}</div>
        </div>
        <div><i style="font-size: 26rem;color: var(--cart_bg_color);" @click="
          this.$router.push('/group');
        " class="iconfont lricon-zhufenzu"></i></div>
        <div><i class="iconfont lricon-shezhi" style="font-size: 21rem;color: var(--cart_bg_color);"></i></div>
      </div>
      <div ref="searchBox" class="search_wrapper">
        <div class="left"><i class="iconfont lricon-sousuo" style="font-size: 20.67rem;"></i>
        </div>
        <input placeholder="输入内容搜索" @keydown="search" type="search" v-model="searchValue"
          class="mid editable-div"></input>
        <div class="right" @click.stop="onCancelSearch">取消</div>
      </div>
      <van-tabs @click-tab="changeTab" @change="changeTab" title-inactive-color="#2c2c2c" line-height="3rem"
        color="black" animated duration="0.300" background="rgba(79, 70, 229, 0.0)" title-active-color="black"
        :scrollspy="true" :lazy-render="false" :swipeable="!isGljl" class="biao_qian_list"
        v-model:active="tabActiveIndex" type="line">
        <van-tab v-for="(item, index) in groupList" :title="item + ' ' + (index + 1)" class="tb">
          <div class="cord_content">
            <div v-for="(item, index) in qikeCord">
              <swipe-cell :disabled="!isGljl" class="cord_box">
                <div @click="toPaipan(item)" class="cord_item">
                  <div class="datee item_info">
                    <div class="info_tit">
                      <div class="icon_box">
                        <i class="iconfont lricon-shijian1"></i>
                      </div>
                      时间:
                    </div>
                    <div style="color: #880E4F;" class="info_value">
                      {{ item.gongliDatetime }}</div>
                  </div>
                  <div class="tit item_info">
                    <div class="info_tit">
                      <div class="icon_box">
                        <i class="iconfont lricon-tiwen-"></i>
                      </div>
                      问事:
                    </div>
                    <div class="info_value tit_value">
                      {{ item.cunDang.zhanShi }}</div>
                  </div>

                  <div class="pingyu item_info">
                    <div class="info_tit">
                      <div class="icon_box">
                        <i class="iconfont lricon-xueqipingyu"></i>
                      </div>
                      评语:
                    </div>
                    <div class="info_value">
                      {{ item.cunDang.duanYu }}
                    </div>
                  </div>
                  <div class="tit item_info">
                    <div class="info_tit">
                      <div class="icon_box">
                        <i class="iconfont lricon-biaoqian1"></i>
                      </div>
                      标签:
                    </div>
                    <div class="info_value">
                      <span v-for="(tg, ti) in item.cunDang.tag">{{ tg }}</span>
                    </div>
                  </div>
                  <div class="tit item_info">
                    <div class="info_tit">
                      <div class="icon_box">
                        <i class="iconfont lricon-fankui"></i>
                      </div>
                      反馈:
                    </div>
                    <div class="info_value">
                      {{ item.cunDang.fanKui }}</div>
                  </div>
                </div>
                <template #right>
                  <div @click="slcOptLrk(item, index)" class="del"><span>删除</span></div>
                </template>
              </swipe-cell>
            </div>
            <VanDivider :dashed="true" style="margin-top: 50vh; margin-bottom: 20vh;">这是底线</VanDivider>
          </div>
        </van-tab>
      </van-tabs>
    </div>
    <van-overlay :lazy-render="false" :show="showDel" @click="showDel = false">

      <transition name="van-slide-up">
        <div class="wrapper_overlay" v-show="showDel">
          <div class="shanchu" @click.stop>
            <div class="shanchu_top">
              请确认是否删除?
            </div>
            <div class="sgx"></div>
            <div class="shanchu_bot">
              <div @click="() => {
                optLrkIndex = -1;
                showDel = false;
                optLrk = null;
              }" class="quxiao">取消</div>
              <div class="zgx"></div>
              <div @click="deleteLrk" class="queren">确认</div>
            </div>
          </div>
        </div>
      </transition>
    </van-overlay>

  </div>
</template>
<script>
import { SwipeCell, Tab, Tabs, Divider, Overlay } from 'vant';
import Database from '@tauri-apps/plugin-sql'
import { Store, getStore } from '@tauri-apps/plugin-store';
import { deleteLiurenkeByid, getLiurenke, getLiurenkeByLikeKey, selectByValue } from '../api/dbUtils';
import { onBackKeyDown } from 'tauri-plugin-app-events-api';
import { getBackgroundColor } from '../api/styleUtils';
import GroupManage from '../page/GroupManage.vue';
import { showToast } from '@nutui/nutui';
import { confirm, open, save } from '@tauri-apps/plugin-dialog';
import { useQiKeDateStore } from '../store';
export default {
  name: "Test",
  components: {
    SwipeCell: SwipeCell,
    VanTab: Tab,
    VanTabs: Tabs,
    VanDivider: Divider,
    VanOverlay: Overlay,
    GroupManage,
  },
  data() {
    return {
      v: '',
      searchValue: '',
      showSearchContent: false,
      tabActiveIndex: 0,
      isGljl: false,
      showDel: false,
      groupList: [],
      getBgStyle: getBackgroundColor,
      showGroupMg: false,
      btnMgTxt: '管理记录',
      qikeCord: [],
      slcFenzu: '全部',
      optLrk: null,
      optLrkIndex: -1,
      qiKeDateStore: useQiKeDateStore()
    };
  },
  async created() {
    const store = await Store.load('data.bin')
    this.groupList = await store.get('qikeGroups')
    let result = await getLiurenke(this.slcFenzu)
    this.qikeCord = [...result]

  },
  props: {},
  methods: {
    async r() {
      location.reload()
    },
    async search(event) {
      if (event.key === 'Enter') {
        let res = await getLiurenkeByLikeKey(this.searchValue)
        this.qikeCord = [...res]
      }
    },
    onSearchBox() {
      
    },
    async onCancelSearch() {
      this.searchValue = ''
      let r = await getLiurenke('全部')
         this.qikeCord = [...r]
      this.tabActiveIndex = 0
    },
    async changeTab(tit) {
      this.slcFenzu = tit.title
      let r = await getLiurenke(this.groupList[this.tabActiveIndex])
      this.qikeCord = [...r]
    },

    slcOptLrk(item, index) {
      this.optLrk = item
      this.optLrkIndex = index
      this.showDel = true
    },
    async deleteLrk() {
      await deleteLiurenkeByid(this.optLrk.id)
      let arr = [...this.qikeCord];
    arr.splice(this.optLrkIndex, 1); 
    this.qikeCord = arr;
      this.optLrkIndex = -1;
      this.showDel = false;
      showToast.warn('删除完成',{id:1})
      this.optLrk = null;
      
    },
    toPaipan(v) {
       this.qiKeDateStore.upDateQiKeDatetimeOption(v);
      this.$router.push("/paipan");
    }
  },
  mounted() {
  }
};
</script>

<style lang="scss" scoped>
.wrapper {
  height: calc(100vh - 54rem);
  width: 100vw;

  display: flex;
  flex-direction: column;
  align-items: center;

  .sub_title {
    width: 100vw;
    background-color: var(--nav_bg_color);
    display: flex;
    align-items: center;
    flex-direction: column;

    .tit_txt {
      .ic {
        i {
          font-size: 20px;

          &:active {
            transition: transform 0.3s ease;
            transform: scale(1.2)
          }
        }

        text-align: center;
        width: 20vw;
        // background-color: #531c1c;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .icl {
        // background-color: #b34747;
        text-align: left;
        font-size: 18px;

        justify-content: flex-start;
      }

      .icr {
        // background-color: #34cc23;
        text-align: right;
        font-weight: bolder;
        justify-content: flex-end;
      }

      width: 94vw;
      height: 30px;
      line-height: 30px;
      font-size: 18px;
      font-weight: 600;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }

  .wrapper_top {
    width: 100vw;
    height: fit-content;

    display: flex;
    flex-direction: column;
    // background-color: var(--cart_bg_color);
    // background-color: #ededed;
    align-items: center;

    ::v-deep(.van-tab--active) {
      // font-size: 1.9rem;
      font-weight: bold;
    }

    .total {
      margin-top: 7.95rem;
      width: 90vw;
      height: 30rem;
      font-size: 17.5rem;
      display: flex;
      // justify-content: space-between;
      align-items: center;
      justify-content: space-between;
      color: var(--cart_bg_color);

      .left_box {
        font-weight: 600;
        display: flex;
        align-items: center;
        width: fit-content;
        color: #000000;

        .left {
          width: fit-content;
          height: 30rem;
          line-height: 30rem;
        }

        .slcGljl {
          background-color: var(--cart_bg_color);
          color: white !important;
        }

        .gljl {
          background-color: var(--cart_bg_color);
          margin-left: 7.95rem;
          width: fit-content;
          height: fit-content;
          color: #ffffff;
          font-size: 14.3rem;
          border: 2rem solid var(--cart_bg_color);
          font-weight: bold;
          letter-spacing: 2rem;
          border-radius: 15rem;
          padding-left: 3rem;
          padding-right: 3rem;
          padding-top: 1rem;
          padding-bottom: 1rem;
          text-align: center;

          &:active {
            transition: transform 0.3s ease;
            transform: scale(0.8)
          }
        }
      }
    }

    .search_wrapper {
      border: 2rem solid var(--cart_bg_color);
      display: flex;
      align-items: center;
      margin-top: 7.95rem;
      height: 30rem;
      width: 90vw;
      //  background-color: #634a5b;
      border-radius: 17rem;
      line-height: 36rem;

      .left {
        width: 31rem;
        height: 24rem;
        line-height: 24rem;
        text-align: center;
        font-size: 18rem;
      }

      input {
        background-color: #ffffff;
        border: none;
        outline: none;
        height: 30rem;
      }

      input::-webkit-search-cancel-button {
        display: none;
      }

      .mid {
        width: calc(94vw - 84rem);
        font-size: 16rem;
        overflow-x: auto;
        // white-space: nowrap;
        /* 禁止文本换行 */
        overflow-x: auto;
        /* 内容超出时显示水平滚动条 */
        overflow-y: hidden;
        /* 隐藏垂直滚动条 */

        /* 设置固定宽度 */
        /* 可选：平滑滚动效果 */
        scroll-behavior: smooth;
      }

      .right {
        width: 36rem;
        height: 24rem;
        line-height: 24rem;
        text-align: center;
        font-size: 13rem;
        background-color: var(--cart_bg_color);
        border-radius: 12rem;
        margin-right: 3rem;
        margin-left: 8rem;
        color: white;
        padding-left: 3rem;
        padding-right: 3rem;
      }

      .right:active {
        transition: transform 0.3s ease;
        transform: scale(1.2)
      }

      .editable-div {
        // border: 1px solid #ddd;
        border-radius: 6px;
        /* 确保有足够编辑空间 */
        outline: none;
        /* 移除默认聚焦边框 */
      }

      /* 聚焦时的样式 */
      // .editable-div:focus {
      //   border-color: #3B82F6;
      //   box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
      // }
    }

    .biao_qian_list {
      width: 100vw;
      flex-grow: 1;
      font-weight: 500;
      overflow: scroll;
      background: rgba($color: #ffffff, $alpha: 0.0);

      ::v-deep(.van-tabs__wrap) {
        // font-size: 1.9rem;
        // width: 94vw;
        // margin-left: 3vw;
        // display: flex;
        // align-items: center;
        // justify-content: center;
      }


      .tb {
        margin-top: 5rem;
        background: rgba($color: #ffffff, $alpha: 0.0);
        font-size: 3rem;
      }

      .cord_content {
        margin-top: 5rem;
        width: 100vw;
        height: 80vh;
        overflow: scroll;
        display: flex;
        // justify-content: flex-start;
        flex-direction: column;
        align-items: center;

        .cord_box:active {
          background-color: #dedede;
        }

        .cord_box {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 92vw;
          border-radius: 6rem;
          margin-bottom: 7.95rem;
          background-color: whitesmoke;

          // border-bottom: 2rem solid #;

          .del {
            background-color: #fc0000;
            color: white;
            width: 55.7rem;
            text-align: center;
            font-size: 18rem;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
          }

          .cord_item {
            margin-top: 7.95rem;
            margin-bottom: 7.95rem;
            width: 92vw;
            display: flex;
            font-size: 12.7rem;
            flex-direction: column;
            height: fit-content;

            .datee {
              color: #a8590a;
              // background-color: #462020;
            }

            .tit {
              .tit_value {
                font-weight: 700;
                color: red;
              }
            }

            .item_info {
              height: 18rem;
              line-height: 18rem;
              height: fit-content;
              border-radius: 4rem;
              box-shadow: #ff0101;

              display: flex;
              width: fit-content;
              max-width: 92vw;

              // border: 0.255rem solid var(--cart_bg_color);
              .info_tit {
                width: fit-content;
                white-space: nowrap;
                display: flex;
                // color: #fbd7c2;
                color: rgb(0, 0, 0);
              }

              .icon_box {
                color: #E91E63;
                height: 18rem;
                width: 28.6rem;
                display: flex;
                font-weight: 700;
                justify-content: center;
                align-items: center;

                i {
                  font-size: 14.3rem;
                }
              }

              .info_value {
                margin-left: 5rem;
                flex-grow: 1;
                height: 18rem;
                overflow: scroll;
                white-space: nowrap;
                font-weight: 500;
                margin-right: 5rem;
                // color: #cdca9e;
                color: rgb(0, 0, 0);
              }

            }
          }
        }


        .menu_content {
          height: fit-content;
          display: flex;
          justify-content: space-around;
          width: 90vw;

          img {
            width: 36.6rem;
            height: 36.6rem;
          }
        }

      }
    }

  }

  .wrapper_overlay {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    z-index: 1000;
    width: 100vw;
    position: fixed;

    .shanchu {
      width: 60vw;
      height: fit-content;
      background-color: #fff;
      height: fit-content;
      text-align: center;
      font-size: 16rem;
      line-height: 64rem;
      border-radius: 16rem;
      overflow: hidden;

      .shanchu_top {
        height: 64rem;
        // color: #fc0000;
        font-weight: 700;
      }

      .sgx {
        height: 1rem;
        width: 60vw;
        background-color: #efefef;
      }

      .shanchu_bot {
        width: 60vw;
        height: 64rem;
        display: flex;
        justify-content: center;

        .queren {
          height: 64rem;
          color: red;
          width: calc(30vw - 0.5rem);

          &:active {
            background-color: #ECEFF1;
          }
        }

        .zgx {
          height: 64rem;
          width: 1rem;
          background-color: #efefef;
        }

        .quxiao {
          height: 64rem;
          width: calc(30vw - 0.5rem);
          color: #006064;

          &:active {
            background-color: #ECEFF1;
          }
        }
      }
    }
  }

  .overlay_box {
    position: fixed;
    height: 100vh;
    width: 100vw;
    display: flex;
    z-index: 9999;
    top: 0;
    left: 0;
    justify-content: center;
    align-items: center;
    // background-color: #ef1414;
    background-color: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(2rem);
  }

}
</style>